<template>
  <!-- 头部 -->
  <header class="header">
    <p>首页</p>
  </header>
  <!-- 轮播 -->
  <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
    <van-swipe-item v-for="item in bannerList" :key="item">
      <img :src="item" alt="" />
    </van-swipe-item>
  </van-swipe>
  <!-- 内容 -->
  <main>
    <div class="mainbox">
      <!-- 1 -->
      <van-grid>
        <van-grid-item icon="cart" text="每日福利" class="a1" />
        <van-grid-item icon="fire" text="热销榜" class="a2" />
        <van-grid-item icon="star" text="皮鲁甄选" class="a3" />
        <van-grid-item icon="comment" text="会员中心" class="a4" />
      </van-grid>
      <!-- 2 -->
      <div class="m-sec">
        <div class="m-sec-top">
          <div class="m-sec-top-left">
            <p>全球奶粉</p>
            <div><img src="../../assets/img/1.png" alt="" /></div>
          </div>
          <div>
            <p>尿不湿</p>
            <div><img src="../../assets/img/1.png" alt="" /></div>
          </div>
        </div>
        <div class="m-sec-top">
          <div class="m-sec-top-left">
            <p>宝宝护理</p>
            <div><img src="../../assets/img/1.png" alt="" /></div>
          </div>
          <div>
            <p>国产奶粉</p>
            <div><img src="../../assets/img/1.png" alt="" /></div>
          </div>
        </div>
      </div>
      <!-- 3 -->
      <div class="m-thr">
        <p>推荐商品</p>
<van-list
  v-model:loading="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"
>
  <van-cell v-for="item in list" :key="item" :title="item" />
</van-list>
        <div
          class="m-thr-list"
          v-for="item in TuijianList"
          :key="item.productId"
        >
          <img :src="item.imgUrl" alt="" />
          <div>
            <p>{{ item.productName }}</p>
            <div>
              <span>￥{{ item.currentPrice }}.00</span
              ><del>￥{{ item.originalPrice }}.00</del>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
</template>
<script>
import { firstBannerApi, firstRecommendApi } from "../../../utils/api";

import { ref, onMounted } from "vue";

export default {
  setup() {
    const bannerList = ref([]);
    const TuijianList = ref([]);
    onMounted(() => {
      getBanner();
      getTuijian();
    });

    // 定义函数接受banner数据
    async function getBanner() {
      // console.log(firstBannerApi());
      let { result } = await firstBannerApi();
      // console.log(result);
      bannerList.value = result.list;
    }

    async function getTuijian() {
      //  console.log(firstRecommendApi());
      let { result } = await firstRecommendApi();
      console.log(result);
      TuijianList.value = result.list;
    }

    return {
      bannerList,
      getBanner,
      // ------------
      getTuijian,
      TuijianList,
    };
  },
};
</script>

<style lang="less" scoped>
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 30px;
  background: #fff;
  z-index: 99;
  text-align: center;
  > p {
    font-size: 18px;
    font-weight: 600;
    line-height: 30px;
  }
}

// 轮播
.my-swipe {
  margin-top: 25px;
  width: 100%;
  height: 200px;
  img {
    width: 100%;
    height: 100%;
  }
  /deep/.van-swipe__indicator {
    border-radius: 0;
    width: 25px;
    height: 3px;
    background: cornsilk;
  }
}

// 内容
main {
  margin-bottom: 60px;
  .mainbox {
    background: #fff;
    .a1 {
      color: aqua;
    }
    .a2 {
      color: blueviolet;
    }
    .a3 {
      color: chocolate;
    }
    .a4 {
      color: crimson;
    }

    //第二部分
    .m-sec {
      padding-bottom: 15px;
      .m-sec-top {
        width: 100%;
        height: 120px;
        display: flex;
        justify-content: space-around;
        padding: 15px 15px 0 15px;
        > div {
          padding-top: 15px;
          display: flex;
          justify-content: space-around;
          background: #fff6e3;
          width: 50%;
          height: 100%;
          p {
            font-size: 16px;
            font-weight: 600;
          }
          img {
            width: 90%;
            height: 90%;
          }
        }
        .m-sec-top-left {
          margin-right: 15px;
          background: rgb(215, 237, 237);
        }
      }
    }
    // 第三部分
    .m-thr {
      padding: 15px 15px 0 15px;
      > p {
        font-size: 16px;
        font-weight: 600;
        border-left: 6px solid red;
        padding-left: 5px;
      }
      .m-thr-list {
        width: 100%;
        height: 150px;
        display: flex;
        justify-content: space-around;
        padding: 20px 0;
        border-bottom: 1px solid #666;

        img {
          height: 90%;
          margin-top: 5px;
        }

        > div {
          margin-left: 16px;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          p {
            font-size: 14px;
            letter-spacing: 1px;
            font-weight: 600;
          }
          > div {
            span {
              font-size: 16px;
              margin-right: 6px;
            }
            del {
              font-size: 14px;
              color: #999;
              text-decoration: line-through;
            }
          }
        }
      }
    }
  }
}
</style>
